<template>
	<div id="AllOrder">
		<x-header :left-options="{showBack: false}" title="我售出的" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="title-bar">
			<div class="tabWrap">
				<tab :class="tabBarFixed == true ? 'isFixed' :''" :line-width=2 active-color='#a30000' custom-bar-width="36px" v-model="index">
					<tab-item class="vux-center" :selected="item.name == demo" v-for="item in list" @on-item-click="tabChange(item.type,item.name)" :key="item.type">{{item.name}}</tab-item>
				</tab>
			</div>
		</div>
		<div class="wrapper">
			<div class="list" v-if="auction_order == ''">
				<div class="no-data">
					<img src="../assets/images/home/nodata.png" />
				</div>
			</div>
			<div class="list" v-if="goods_return == ''">
				<div class="no-data">
					<img src="../assets/images/home/nodata.png" />
				</div>
			</div>
			<div class="list" style="overflow: hidden;" v-if="auction_order != '' ">
				<div class="shopInfo" v-for="(item,index) in auction_order" v-if="item.order_state != 35 && item.order_state != 36" :key="index">
					<!--头部店铺-->
					<div class="title_bar">
						<img src="../assets/images/home/after_sale_buyer_head.png" alt="" class="photo" />
						<div class="title">
							<span v-if="item.member_id == 0">会员不存在</span>
							<span v-else>{{item.member_nickname}}</span>
						</div>
						<div class="miao">
							<img v-if="item.order_from == 'seckill_order'" class="icon_logo" src="../assets/images/home/icon_limit.png" alt="" />
							<div class="sign">
								<span v-if="item.order_state == 10">买家待付款</span>
								<span v-if="item.order_state == 20">待发货</span>
								<span v-if="item.order_state == 30">待收货</span>
								<span v-if="item.order_state == 40">已收货</span>
								<span v-if="item.order_state == 50">退款</span>
							</div>
						</div>
					</div>
					<!--拍品-->
					<div class="buyInfo">
						<router-link :to="'/SellerOrderInfo/order_sn/' + item.order_sn">
							<div class="pic_bar">
								<img v-if="item.goods_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" />
								<img v-else :src="'/los/uploads/thumb/goods/' + item.goods_id + '_76X76.jpeg'" alt="" />
								<div class="right limit">
									<p>{{item.goods_name}}</p>
									<b v-if="item.order_from == 'seckill_order'">￥{{item.seckill_price}}</b>
									<b v-else>￥{{item.pay_money}}</b>
								</div>
							</div>
							<div class="timer">
								<p v-if="item.order_state == 10">
									<count-down :currentTime="cur_time" :startTime="item.order_time" :endTime="item.order_time + 86400 * 3" :tipText="'距开始'" :tipTextEnd="'距付款'" :endText="'交易关闭'" :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="'秒'"></count-down>
								</p>
								<p v-else>付款时间:{{common.timestampToTime(item.order_time)}}</p>
								<b>查看详情</b>
							</div>
						</router-link>
					</div>
				</div>
			</div>
			<div class="list" style="overflow: hidden;" v-if="goods_return != ''">
				<div class="shopInfo" v-for="(item,index) in goods_return" v-if="item.return_state != 0" :key="index">
					<!--头部店铺-->
					<div class="title_bar">
						<img src="../assets/images/home/after_sale_buyer_head.png" alt="" class="photo" />
						<div class="title">
							<span v-if="item.member_id == 0">会员不存在</span>
							<span v-else>{{item.member_nickname}}</span>
						</div>
						<div class="miao">
							<img v-if="item.order_from == 'seckill_order'" class="icon_logo" src="../assets/images/home/icon_limit.png" alt="" />
							<div v-if="item.return_state == null" class="sign">确认退货申请</div>
							<div v-if="item.return_state == 1 && item.express_number == null" class="sign">等待买家退货</div>
							<div v-if="item.return_state == 1 && item.express_number != null" class="sign">买家退货已发</div>
							<div v-if="item.pay_state == 2" class="sign">卖家已退款 交易关闭</div>
						</div>
					</div>
					<!--拍品-->
					<div class="buyInfo">
						<router-link :to="'/SellerOrderInfo/order_sn/' + item.order_sn + '?return_sn=' + item.return_sn">
							<div class="pic_bar">
								<img v-if="item.goods_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" />
								<img v-else :src="'/los/uploads/thumb/goods/' + item.goods.goods_id + '_84X84.jpeg'" alt="" />
								<div class="right limit">
									<p>{{item.goods_name}}</p>
									<b v-if="item.order_from == 'seckill_order'">￥{{item.seckill_price}}</b>
									<b v-else>￥{{item.return_money}}</b>
								</div>
							</div>
						</router-link>
						<div class="timer">
							<router-link :to="'/SellerReturn/return_sn/' + item.return_sn + '?typeName=同意退货'">
								<b v-if="item.return_state == null">同意退货</b>
							</router-link>
							<router-link :to="'/SellerReturn/return_sn/' + item.return_sn + '?typeName=拒绝退货'">
								<b v-if="item.return_state == null">拒绝退货</b>
							</router-link>
							<router-link :to="'/SellerReturn/return_sn/' + item.return_sn + '?typeName=确认退款'">
								<b v-if="item.return_state == 1 && item.express_number != null">确认退款</b>
							</router-link>
							<b v-if="item.pay_state == 2" class="del">删除订单</b>
							<router-link :to="'/SellerOrderInfo/order_sn/' + item.order_sn + '?return_sn=' + item.return_sn">
								<b v-if="item.return_state == 1 && item.express_number == null">查看详情</b>
							</router-link>
						</div>
					</div>
				</div>
			</div>
		</div>
		<toast v-model="success" type="text" width='3.5rem' is-show-mask>{{msg}}</toast>
		<loading :show="show1" :text="text"></loading>
	</div>
</template>

<script>
	import { XHeader, Toast, Tab, TabItem, Swiper, SwiperItem, InlineLoading, Sticky, Popup, Loading, Spinner, ViewBox } from 'vux'
	import $ from 'jquery';
	import axios from 'axios'
	import BScroll from 'better-scroll';
	import CountDown from 'vue2-countdown';
	export default {
		data() {
			return {
				index: 0,
				checked: '',
				show: false,
				show1: false,
				show2: false,
				success: false,
				disabled: false,
				tabBarFixed: false,
				msg: '',
				text: '加载中',
				listContent: [],
				selected: '',
				confirm: '',
				tracknum: '',
				demo: '全部',
				list: [{
						name: '全部'
					}, {
						name: '待付款',
						type: '10'
					},
					{
						name: '待发货',
						type: '20'
					},
					{
						name: '已发货',
						type: '30'
					},
					{
						name: '售后',
						type: '0'
					}
					//					{
					//						name: '已收货',
					//						type: '40'
					//					},
					//					{
					//						name: '退款',
					//						type: '50'
					//					},
				],
				cur_time: '',
				selected: 0,
				cache: true,
				flag: true,
				time: 0,
				auction_order: [],
				goods_return: [],
				deposit_time: '',
				order_times: '',
				order_from: '',
				order_sn: '',
				urls: '',
				express_comanay: '',
				express_number: ''
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Swiper,
			SwiperItem,
			InlineLoading,
			Sticky,
			Toast,
			Loading,
			Spinner,
			ViewBox,
			CountDown,
			Popup
		},
		deactivated() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		mounted() {
			this.tabChange();
			window.addEventListener('scroll', this.handleScroll);
		},
		methods: {
			tabChange: function(index, name) {
				let more = true;
				let page = 1;
				this.demo = name;
				this.selected = index;
				let _this = this;
				let url = '/los/api/seller/goods_order_list.json'
				if(this.selected > 0) {
					url += '?os=' + this.selected;
				} else if(this.selected == 0) {
					url = '/los/api/seller/goods_return.json'
				}
				this.$http({
					method: 'GET',
					url: url,
					data: ''
				}).then((result) => {
					if(result.data.goods_order == '') {
						this.auction_order == ''
					} else if(result.data.goods_return == '') {
						this.goods_return == ''
					} else {
						this.auction_order = result.data.data.goods_order;
						this.goods_return = result.data.data.goods_return;
						this.cur_time = result.data.cur_time;
						this.cache = false;
						this.$nextTick(() => {
							this.cache = true;
						});
					}
				}).catch((err) => {
					console.log(err);
				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/seller/goods_order_list.json?os=' + _this.selected + '&page=' + page).then(function(result) {
								$.each(result.data.data.goods_order, function(index, val) {
									_this.auction_order.push(val);
								});
								more = true;
								if(result.data.data.goods_order == '') {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})
			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	.wrapper .list .no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto 0;
	}
	
	.wrapper .list .no-data img {
		width: 100%;
	}
	
	.wrapper .list .no-data .desc {
		margin-top: 0.4rem;
		text-align: center;
		font-size: 0.4rem;
		color: #aaa;
	}
	
	.isFixed {
		position: fixed;
		z-index: 999;
		width: 100%;
		top: 0;
	}
	
	.header {
		background: #fff;
	}
	/*快递弹窗*/
	
	.confirm {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		display: none;
		top: 0;
	}
	
	.confirm .wrap {
		width: 76%;
		background: #fff;
		position: absolute;
		top: 30%;
		left: 12%;
		border-radius: 0.05rem;
	}
	
	.confirm .wrap .inputWrap {
		padding: 0.26rem 0.5rem;
	}
	
	.confirm input {
		width: 100%;
		height: 1.13rem;
		background: #f3f3f3;
		margin-top: 0.4rem;
		text-align: center;
	}
	
	.confirm .button {
		margin-top: 0.4rem;
		display: flex;
	}
	
	.confirm .button span {
		float: left;
		text-align: center;
		font-size: 0.42rem;
		line-height: 1.3rem;
		flex-grow: 1;
	}
	
	.confirm .button span:last-child:after {
		display: none;
	}
	
	.contentWrap {
		position: relative;
	}
	
	.contentWrap .tabWrap {
		position: fixed;
		width: 100%;
		top: 1.06rem;
	}
	
	.contentWrap .listWrap {
		margin-top: 1.06rem;
	}
	
	.shopInfo {
		margin: 0.26rem;
		overflow: hidden;
		background: #fff;
		border-radius: 0.26rem;
	}
	
	.shopInfo .title_bar {
		height: 1.17rem;
		line-height: 1.17rem;
	}
	
	.shopInfo .title_bar .photo {
		width: 0.37rem;
		height: 0.37rem;
		margin: 0.37rem 0.26rem;
		float: left;
		border-radius: 0.05rem;
	}
	
	.shopInfo .title_bar .title {
		float: left;
		font-size: 0.37rem;
		color: #333;
	}
	
	.shopInfo .title_bar .title span {
		height: 1.17rem;
		line-height: 1.17rem;
		display: inline-block;
	}
	
	.shopInfo .title_bar .title img {
		width: 0.26rem;
		height: 0.26rem;
		margin-left: 0.4rem;
		float: right;
		margin-top: 0.4rem;
	}
	
	.shopInfo .title_bar .miao {
		float: right;
		position: relative;
	}
	
	.shopInfo .title_bar .miao img {
		float: left;
		position: absolute;
		right: 1.73rem;
		width: 1.2rem;
		height: 1.2rem;
		top: 0.13rem;
	}
	
	.shopInfo .title_bar .miao .sign {
		float: right;
	}
	
	.shopInfo .title_bar .sign {
		float: right;
		padding-right: 0.26rem;
		font-size: 0.34rem;
		color: #a30000;
	}
	
	.shopInfo .buyInfo {
		/*width: 96%;*/
		/*margin: 0 0.26rem;*/
		background: #F9F9F9;
	}
	
	.shopInfo .buyInfo .pic_bar {
		padding: 0.4rem 0.26rem;
		overflow: hidden;
	}
	
	.shopInfo .buyInfo .add {
		line-height: 0.8rem;
		height: 0.8rem;
		width: 100%;
		text-align: right;
	}
	
	.shopInfo .buyInfo .add p {
		font-size: 0.34rem;
		color: #333;
	}
	
	.shopInfo .buyInfo .add p span {
		font-size: 0.42rem;
	}
	
	.shopInfo .buyInfo .pic_bar img {
		width: 2.05rem;
		height: 2.05rem;
		float: left;
		border-radius: 0.05rem;
	}
	
	.shopInfo .buyInfo .pic_bar .right {
		float: left;
		margin-top: 0.05rem;
		margin-left: 0.34rem;
		height: 1.92rem;
		width: 73%;
		overflow: hidden;
	}
	
	.shopInfo .buyInfo .pic_bar .right p {
		font-size: 0.34rem;
		line-height: 0.5rem;
		color: #333;
		height: 1rem;
	}
	
	.shopInfo .buyInfo .pic_bar .right b {
		font-weight: normal;
		color: #DA4240;
		font-size: 0.42rem;
		margin-top: 0.4rem;
		display: block;
	}
	
	.shopInfo .buyInfo .pic_bar .limit b {
		float: left;
	}
	
	.shopInfo .buyInfo .pic_bar .limit span {
		float: right;
		margin: 0.4rem 0.29rem 0 0;
		font-size: 0.34rem;
		color: #777;
	}
	
	.shopInfo .buyInfo .pic_bar .bao b {
		color: #1874da;
		font-size: 0.42rem;
		float: left;
	}
	
	.shopInfo .buyInfo .pic_bar .bao .baoWrap {
		position: relative;
		float: left;
		margin: 0.4rem 0 0 0.34rem;
	}
	
	.shopInfo .buyInfo .pic_bar .bao .baoWrap img {
		width: 1.49rem;
		height: 0.5rem;
	}
	
	.shopInfo .buyInfo .pic_bar .bao .baoWrap span {
		position: absolute;
		top: 0;
		left: 0.26rem;
		font-size: 0.32rem;
		color: #1874da;
		display: block;
		line-height: 0.5rem;
		text-align: center;
	}
	
	.shopInfo .buyInfo .promise {
		height: 1.3rem;
		line-height: 1.3rem;
		border-bottom: solid 1px #f3f3f3;
		color: #333;
		overflow: hidden;
	}
	
	.shopInfo .buyInfo .promise span {
		float: left;
		font-size: 0.34rem;
	}
	
	.shopInfo .buyInfo .promise b {
		float: right;
		font-weight: normal;
		font-size: 0.34rem;
	}
	
	.shopInfo .buyInfo .sendTime {
		height: 1.3rem!important;
		line-height: 1.3rem!important;
		margin: 0 0.26rem;
		overflow: hidden;
	}
	
	.shopInfo .timer {
		width: 100%;
		overflow: hidden;
		background: #fff;
		padding: 0 0.26rem;
	}
	
	.shopInfo .timer p {
		float: left;
		height: 1.3rem;
		line-height: 1.3rem;
		font-size: 0.34rem;
		overflow: hidden;
	}
	
	.shopInfo .timer b {
		float: right;
		font-weight: normal;
		color: #a30000;
		width: 1.97rem;
		height: 0.77rem;
		line-height: 0.77rem;
		text-align: center;
		margin: 0.26rem 0 0.26rem 0.26rem;
		border: solid 1px #a30000;
		border-radius: 0.34rem;
		font-size: 0.34rem;
	}
	
	.shopInfo .timer b.del {
		color: #aaa;
		border: solid 1px #aaa;
	}
</style>